<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row :gutter="24">

        <!-- 条件搜索 -->
        <!-- <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="货物名称">
                  <a-input v-model="queryParam.inventoryName" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="货物编码" >
                  <a-input v-model="queryParam.inventoryCode" placeholder="请输入" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :md="!advanced && 8 || 24" :sm="24">
                <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                  <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                  <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div> -->
        <!-- 操作 -->
        <div class="table-operations">
          <a-button type="primary" @click="$refs.createForm.handleAdd()" >
            <a-icon type="plus" />新增
          </a-button>
          <table-setting
            :style="{float: 'right'}"
            :table-size.sync="tableSize"
            v-model="columns"
            :refresh-loading="loading"
            @refresh="getList" />
        </div>
        <!-- 创建/编辑,单独封装了组件 -->
        <create-form
          ref="createForm"
          @ok="getList"
        />
        <!-- 数据展示 -->
        <a-table
          :loading="loading"
          :size="tableSize"
          rowKey="record => record.id"
          :columns="columns"
          :data-source="list"
          :pagination="false"
          :bordered="tableBordered"
        >
          <!-- <template #action="{ record }">
              <a @click="handleUpdate(record, undefined)">
                <a-icon type="edit" />修改
              </a>
              <a-divider type="vertical" />
              <a @click="handleDelete(record)" >
                <a-icon type="delete" />删除
              </a>

            </template> -->
          <span slot="action" slot-scope="text, record">
            <a @click="$refs.createForm.handleUpdate(record, undefined)" >
              <a-icon type="edit" />修改
            </a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)" >
              <a-icon type="delete" />删除
            </a>
          </span>
        </a-table>
        <a-pagination
          class="ant-table-pagination"
          show-size-changer
          show-quick-jumper
          :current="queryParam.pageNum"
          :total="total"
          :page-size="queryParam.pageSize"
          :showTotal="total => `共 ${total} 条`"
          @showSizeChange="onShowSizeChange"
          @change="changeSize"
        />

      </a-row>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import CommonTree from '@/components/CommonTree'
import { projectTree } from '@/api/project/manage'
import { equipment, deleteeequipment } from '@/api/baseData/device'
import { tableMixin } from '@/store/table-mixin'
import CreateForm from './modules/CreateForm.vue'
export default {
components: {
  CommonTree,
  CreateForm
  },
  mixins: [tableMixin],
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  data () {
    return {
      // 部门树选项
      treeOptions: [],
      queryParam: {
        inventoryName: '',
        inventoryCode: '',
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      advanced: false,
      loading: false,
      selectProjectId: '',
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '设备名称',
          dataIndex: 'equipmentName',
          ellipsis: false,
          align: 'center'
        },
        {
          title: '设备型号',
          dataIndex: 'equipmentModel',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '设备编号',
          dataIndex: 'equipmentCode',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '设备数量',
          dataIndex: 'quantity',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          fixed: 'right',
          width: '150',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  created () {
    this.getInventoryCategoryTree()
    this.getList()
  },
  methods: {
    // 查询所有数据tree
    getInventoryCategoryTree () {
      projectTree().then(res => {
        this.treeOptions = res.data
      })
},

    clickInventoryNode (categoryCode) {
      this.queryParam.projectId = categoryCode
      this.selectProjectId = categoryCode
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 查询部门列表 */
    getList () {
      this.loading = true
      equipment(this.queryParam).then(response => {
        response.rows.forEach(item => {
          // item.children = item.warehouseReceiptList
        })
          this.list = response.rows // this.handleTree(response.data, 'deptId')
          this.total = response.total
          this.loading = false
        }
      )
    },
     /** 搜索按钮操作 */
     handleQuery () {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        deptName: undefined,
        status: undefined
      }
      this.handleQuery()
    },
    handleDelete (record) {
      deleteeequipment({ idList: [record.id] }).then(res => {
        this.getList()
        this.$message.success(
                '删除成功',
                3
              )
      })
    }

  }
}
</script>
<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;
  }
  .ant-table td { white-space: nowrap; }
  </style>
